<template>
  <div>
    <van-nav-bar
      :border="false"
      fixed
      title="烘焙帮"
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="height: 46px"></div>
    <div class="main">
      <div class="title">什么是食谱达人？</div>
      <div class="intro">
        烘焙帮活跃优质达人，热爱烘焙并对烘焙有深度见解，制作能力强，能够上传优质烘焙内容（优秀食谱、作品、测评、视频等）。与烘焙帮共同创造优质烘焙社区，共同成长。
      </div>
      <div class="title">怎样成为食谱达人？</div>
      <div class="text">
        <span>达到以下要求，可通过达人认证，成为食谱达人：</span>
        <span
          >1.
          至少上传20篇烘焙类食谱，且被推荐首页8次以上（头条日被推荐的食谱不计）</span
        >
        <span>2.或者上传的食谱中，有5篇以上位优秀食谱；</span>
        <span>凡满足以上两个要求之一，都可以申请成为达人。</span>
      </div>
      <div class="title">食谱达人特权？</div>
      <div class="text">
        <span>1. 专属达人勋章全站展示；</span>
        <span>2. 优先参与产品试用活动；</span>
        <span>3. 站内上传食谱奖励300帮贡。</span>
      </div>
      <div class="title">食谱达人要求？</div>
      <div class="text">
        <span>1. 食谱达人须每月至少上传一篇优秀食谱，否则勋章将会被收回。</span>
        <span>2. 食谱达人需遵守烘焙帮社区规范。</span>
        <span>3. 食谱达人需进入“烘焙帮美食达人群”，不得擅自退群。</span>
      </div>
      <div class="title">您当前的状态？</div>
      <div class="bottom">
        <span>您当前还不是食谱达人</span>
        <van-button
          @click="
            $dialog.alert({
              title: '提示',
              message: '亲，你还没有权限申请达人~~',
            })
          "
          block
          >申请认证</van-button
        >
        <span>每隔15天可申请一次</span>
        <span>将在3个工作日内完成审核并私信通知结果</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      return this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
  color: #000;
}
:deep(.van-button--default) {
  background-color: #efedeb;
}
:deep(.van-button--normal) {
  font-size: 18px;
}
.main {
  padding: 15px;
  background-color: #fff;
}
.intro {
  font-size: 14px;
  line-height: 20px;
  color: #4a4945;
}
.title {
  line-height: 40px;
  font-size: 18px;
  font-weight: bold;
  color: #4a4945;
  text-align: center;
}
.text {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.text > span {
  font-size: 14px;
  line-height: 20px;
  color: #4a4945;
  margin: 10px 0;
}
.bottom {
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.bottom > span {
  font-size: 14px;
  color: #999;
}
</style>

<style lang="scss" scoped></style>
